<template>
    指令Directive
    <br>
    <p v-if="seen1">Now you see me</p>
    <p v-if="seen2">Now you see me</p>
    <br>
    参数Arguments
    <br>
    <a v-bind:href="url">http://localhost:5173/studemo12</a>
    <br>
    <a :href="url">http://localhost:5173/studemo12</a>
    <br>
    v-on指令
    <br>
    <a v-on:click="dosomething">{{ str }}</a>
    <br>
    <a @click="dosomething"> {{ str }} </a>
    <br>
    <div>
        <p>v- 开头都是vue 的指令</p>
        <p>v-text 用来显示文本</p>
        <p>v-html 用来展示富文本</p>
        <p>v-if 用来控制元素的显示隐藏（切换真假DOM）</p>
        <p>v-else-if 表示 v-if 的“else if 块”。可以链式调用</p>
        <p>v-else v-if条件收尾语句</p>
        <p>v-show 用来控制元素的显示隐藏（display none block Css切换）</p>
        <p>v-on 简写@ 用来给元素添加事件</p>
        <p>v-bind 简写: 用来绑定元素的属性Attr</p>
        <p>v-model 双向绑定</p>
        <p>v-for 用来遍历元素</p>
        <p> v-on修饰符 冒泡案例</p>
        <p>v-once 性能优化只渲染一次</p>
        <p>v-memo 性能优化会有缓存</p>
    </div>


</template>

<script setup lang='ts'>
let seen1 = true
let seen2 = false
let url = 'http://localhost:5173/studemo12'
let str = '123'
function dosomething() {
    str += '123'
}

</script>

<style></style>